<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="mast"/>
			<button @click="haa">add</button>
			<!-- dataLisr.length如说数组长度，
			 也就是还有值的时候 v-show的结果为true 那么ul无序就可以显示出来，反之就隐藏-->
			<ul v-show="dataLisr.length">
				<li v-for="(item,index) in dataLisr">{{item}}<button @click="mysql(index)">1</button></li>
			</ul>
			<!-- !dataLisr.length 长度为0，结果为false -->
			<!-- !dataLisr.length 结果是真，div就显示出来 -->
			<div v-show="!dataLisr.length">待办是空空如有</div>
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					dataLisr:['111','222'],
					mast:'',
					
				},
				methods:{
					haa(){
						// push 提交方法
						this.dataLisr.push(this.mast)
						// 清空输入框的内容
						this.mast=''
					},
					mysql(index){
						// splice 删除
						this.dataLisr.splice(index,1)
						
					}
				}
			})
		</script>
	</body>
</html>